<template>
	<view class="l-down-select">
		<view class="l-down-select-box">
			<view class="l-down-select-box-item" v-for="(item,index) in menuList" :key="index"
				@click="handleClickItem(item,index)" :style="{color: item.show ? activeColor : ''}">
				{{item.text}}<uni-icons type="up" :color="item.show ? activeColor : ''"
					style="transition: transform 0.3s ease; transform-origin: center center;display: flex;align-items: center;"
					:class="{'up_rotate': item.show,'down_rotate': !item.show}"></uni-icons>
			</view>
		</view>
		<DownView ref="downViewRef" @close="handleClose" v-bind="$attrs">
			<template #slot1 v-if="currentModel.type == 'slot1'">
				<slot name="slot1"></slot>
			</template>
			<template #slot2 v-if="currentModel.type == 'slot2'">
				<slot name="slot2"></slot>
			</template>
			<template #slot3 v-if="currentModel.type == 'slot3'">
				<slot name="slot3"></slot>
			</template>
			<template #slot4 v-if="currentModel.type == 'slot4'">
				<slot name="slot4"></slot>
			</template>
			<template #slot5 v-if="currentModel.type == 'slot5'">
				<slot name="slot5"></slot>
			</template>
		</DownView>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import DownView from './down-view'
	import {
		deepClone
	} from './utils'
	const props = defineProps({
		menu: {
			type: Array,
			defalut: () => []
		},
		activeColor: {
			type: String,
			default: '#007aff'
		}
	})

	const menuList = ref([])
	const currentModel = ref({})

	const initData = () => {
		menuList.value = deepClone(props.menu || [])
		menuList.value = menuList.value.map(item => {
			return {
				...item,
				show: false
			}
		})
	}
	onMounted(initData)
	const downViewRef = ref(null)
	const handleClickItem = (record, index) => {
		console.log("handleClickItem", record, index)
		currentModel.value = record
		menuList.value.forEach((item, ind) => {
			if (ind != index) {
				item.show = false
			}
		})
		record.show = !record.show
		if (menuList.value.some(el => el.show)) {
			downViewRef.value.openMenuItemPopup()
		} else {
			downViewRef.value.closeMenuPopup()
		}

	}
	const handleClose = () => {
		menuList.value.forEach((item, ind) => {
			item.show = false
		})
	}

	const close = () => {
		downViewRef.value.closeMenuPopup()
		handleClose()
	}
	defineExpose({
		close
	})
</script>

<style lang="scss" scoped>
	.up_rotate {
		transform: rotate(-180deg);

	}

	.down_rotate {
		transform: rotate(0deg);
	}

	.l-down-select {
		&-box {
			display: flex;
			justify-content: space-between;

			&-item {
				flex: 1;
				display: flex;
				gap: 10rpx;
				justify-content: center;
				padding: 10rpx 0;
			}
		}
	}
</style>